<template>
  <div class="air-column" id="IndentState">
    <div v-if="indentState == 'CREATED'">
      <div class="created"><el-icon :size="fontSize"><warning-filled /></el-icon> 待支付</div>
    </div>

    <div v-if="indentState == 'CANCELED'">
      <div class="canceled" ><el-icon :size="fontSize"><remove-filled /></el-icon> 已取消</div>
    </div>

    <div v-if="indentState == 'PAID'">
      <div class="finished"><el-icon :size="fontSize"><success-filled /></el-icon> 已支付</div>
    </div>

    <div v-if="indentState == 'CHECKEDIN'">
      <div class="finished"><el-icon :size="fontSize"><success-filled /></el-icon> 已入住</div>
    </div>

    <div v-if="indentState == 'CHECKEDOUT'">
      <div class="finished"><el-icon :size="fontSize"><success-filled /></el-icon> 已退房</div>
    </div>

    <div v-if="indentState == 'COMMENTED'">
      <div class="finished"><el-icon :size="fontSize"><success-filled /></el-icon> 已评价</div>
    </div>
  </div>
</template>
<script setup>
import {defineProps, onMounted, ref} from 'vue'
// const indentState=ref('CREATED')
// const indentState=ref("")
// const fontSize=ref(10)
defineProps({
  fontSize:Number,
  indentState:String,
})

</script>
<style>
.created{
  color:#DAA520;
  font-size:20px;
}
.finished{
  color:	#32CD32;
  font-size:20px;
}
.canceled{
  color: 	#DC143C;
  font-size:20px;
}
</style>
